<template>
	<div>
		<div class="margin-bottom20">
			<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="handleBatchDel">批量删除
			</el-button>
			<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="addExamUserHandle">添加用户
			</el-button>
		</div>
		<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">

			<!-- 表格头部 -->
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="name" label="名称" width="100px" show-overflow-tooltip></el-table-column>
			<el-table-column label="头像">
				<template slot-scope="scope">
					<el-image class="table-td-thumb" :src="scope.row.headImage" :preview-src-list="[scope.row.headImage]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="sex.name" label="性别">
				<template slot-scope="scope">
					<span>{{scope.row.sex==0?'男':'女'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="mobile" label="电话" width="140px"></el-table-column>
			<el-table-column prop="wxAccount" label="微信号"></el-table-column>
			<el-table-column prop="cityName" label="备考地区"></el-table-column>
			<el-table-column prop="answerNum" label="做题数量"></el-table-column>
			<el-table-column prop="createTime" label="注册时间"></el-table-column>
		</el-table>

		<!-- 用户列表弹出框 -->
		<el-dialog title="用户列表" :visible.sync="userListVisible" append-to-body>
			<el-input v-model="queryUser.id" placeholder="ID" class="width260 margin-right10 margin-bottom10"></el-input>
			<el-input v-model="queryUser.mobile" placeholder="手机号" class="width260 margin-right10"></el-input>
			<el-input v-model="queryUser.name" placeholder="昵称" class="width260 margin-right10"></el-input>
			<el-input v-model="queryUser.remark" placeholder="备注" class="width260 margin-right10"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearchUser">搜索</el-button>
			<el-button type="primary" icon="el-icon-search" @click="handleAddUserToExam">添加到试卷</el-button>
			<el-table :data="tableDataUser" border class="margin-top20" ref="multipleTable"
				header-cell-class-name="table-header" @selection-change="handleSelectionChangeUser">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="mobile" label="电话"></el-table-column>
				<el-table-column prop="createTime" label="注册时间"></el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total, prev, pager, next" :current-page="queryUser.pageNumber"
					:page-size="queryUser.pageSize" :total="pageTotalUser" @current-change="handlePageChangeUser">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				multipleSelection: [],
				tableData: [],
				userListVisible: false,
				queryUser: {
					pageNumber: 1,
					pageSize: 30
				},
				tableDataUser: [],
				pageTotalUser: 0,
				multipleSelectionUser: [],
				examPaperId: ''
			}
		},
		methods: {
			show(id) {
				this.examPaperId = id
				this.getData()
			},
			// 分页导航
			handlePageChangeUser(val) {
				this.queryUser.pageNumber = val
				this.getUserData();
			},
			// 用户多选操作
			handleSelectionChangeUser(val) {
				this.multipleSelectionUser = val;
			},
			handleAddUserToExam() {
				this.$confirm('确定要添加吗？', '提示', {
						type: 'warning'
					}).then(() => {
						if (this.multipleSelectionUser.length == 0) return
						let ids = Array.from(this.multipleSelectionUser, ({
							id
						}) => id)
						this.$post('/admin/examPaper/saveExamPaperUser?examPaperId=' + this.examPaperId, ids).then(res => {
							this.$message.success('添加成功');
							this.multipleSelectionUser = [];
							this.getData();
							this.userListVisible = false;
						})
					})
					.catch(() => {});
			},
			// 触发搜索按钮
			handleSearchUser() {
				this.queryUser.pageNumber = 1
				this.getUserData();
			},
			//获取用户数据
			async getUserData() {
				const res = await this.$get('/admin/user/page', this.queryUser)
				if (res.code == 1000) {
					this.tableDataUser = res.data.list
					this.pageTotalUser = res.data.totalRow
				}
			},
			//打开用户
			addExamUserHandle: function() {
				this.userListVisible = true;
				this.getUserData();
			},
			//批量删除
			handleBatchDel() {
				this.$confirm('确定要批量删除已选中试题吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$post('/admin/examPaper/deleteExamPaperUser?examPaperId=' + this.examPaperId, ids).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {})
			},
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//获取数据
			async getData() {
				const res = await this.$get('/admin/examPaper/getExamPaperUser', {
					examPaperId: this.examPaperId
				})
				if (res.code == 1000) {
					this.tableData = res.data
				}
			}
		}
	}
</script>

<style>
</style>